{% extends 'basic/component.html' %}
{% load static %}
{% load i18n %}

{% block pageTitle %}
    {% trans 'Analysis' %}
{% endblock %}

{% block pageHeadExtra %}
    <link href="{% static 'css/analysis/left-navbar.css' %}" rel="stylesheet">
    <script src="{% static 'js/analysis/left-navbar.js' %}"></script>
{% endblock %}

{% block pageBody %}
{% include 'analysis/left-navbar.html' %}

<div class="page-body">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="row row-title" id="rowStatisticsTitle">
            <span>{% trans 'Statistics' %}</span>
        </div>
        <div class="row" id="rowStatistics">
            <div class="col-xs-6 col-sm-3 card-wrapper">
                <div class="data-card">
                    <div class="data-card-title ">
                        {% trans 'Views' %}
                    </div>
                    <div class="data-card-content" id="card-views">
                        --
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 card-wrapper">
                <div class="data-card">
                    <div class="data-card-title">
                        {% trans 'Downloads' %}
                    </div>
                    <div class="data-card-content" id="card-downloads">
                        --
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 card-wrapper">
                <div class="data-card">
                    <div class="data-card-title">
                        {% trans 'Data' %}
                    </div>
                    <div class="data-card-content" id="card-data-count">
                        --
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 card-wrapper">
                <div class="data-card">
                    <div class="data-card-title">
                        {% trans 'Template' %}
                    </div>
                    <div class="data-card-content" id="card-template-count">
                        --
                    </div>
                </div>
            </div>
        </div>{# statistics #}

{#        <div class="row row-title" id="rowTrendTitle">#}
{#            {% trans 'Trend' %}#}
{#        </div>#}
{#        <div class="row" id="rowTrend">#}
{#            <div class="col-xs-12 col-lg-6 card-wrapper">#}
{#                <div class="data-card">#}
{#                    <div style="padding: 8px;">#}
{#                        <canvas id="trendOfView" style="min-height: 100%; width: 100%;"></canvas>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="col-xs-12 col-lg-6 card-wrapper">#}
{#                <div class="data-card">#}
{#                    <div style="padding: 8px;">#}
{#                        <canvas id="trendOfCount" style="min-height: 100%; width: 100%;"></canvas>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>{# trend #}

        <div class="row row-title" id="rowDatabaseTitle">
            {% trans 'Database' %}
        </div>
        <div class="row" id="rowDatabase">
            <div class="col-xs-12 col-lg-6 card-wrapper">
                <div class="data-card">
                    <div style="padding: 8px;">
                        <canvas id="dbView" style="min-height: 100%; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-lg-6 card-wrapper">
                <div class="data-card">
                    <div style="padding: 8px;">
                        <canvas id="dbCount" style="min-height: 100%; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>{# database #}
    </div>{# col #}
</div>{# page-body #}
{% endblock %}

{% block pageFootExtra %}
    <link href="{% static 'css/analysis/analysis.css' %}" rel="stylesheet">
    <script src="{% static 'js/analysis/analysis.js' %}"></script>

    <script src="https://cdn.bootcss.com/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.min.js"></script>
    <script src="https://cdn.bootcss.com/Chart.js/2.7.1/Chart.min.js"></script>
    <script src="{% static 'js/vendor/template-script.min.js' %}"></script>
    <script src="{% static 'js/vendor/template-init.min.js' %}"></script>
{% endblock %}